<template>
    <div style="width: 100%;height: 100%;">
        <div class="map-controls">
            <button v-for="layer in baseLayers" :key="layer.name" @click="switchBaseLayer(layer.name)"
                :class="{ active: currentBaseLayer === layer.name }">
                {{ layer.title }}
            </button>
        </div>
        <div ref="mapContainer2" class="map-container"></div>
    </div>
</template>

<script>
import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
import OSM from 'ol/source/OSM';

export default {
    data() {
        return {
            map: null,
            currentBaseLayer: 'gaode',
            baseLayers: null
        }
    },
    mounted() {
        // 在组件初始化时调用
        this.initMap();
    },
    methods: {

        initMap() {
            this.baseLayers = {
                gaode: {
                    name: 'gaode',
                    title: '高德地图',
                    layer: new TileLayer({
                        source: new XYZ({
                            url: 'https://webrd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
                            crossOrigin: 'anonymous',
                            attributions: '© 高德地图'
                        })
                    })
                },
                osm: {
                    name: 'osm',
                    title: 'OpenStreetMap',
                    layer: new TileLayer({
                        source: new OSM()
                    })
                },
                satellite: {
                    name: 'satellite',
                    title: '卫星地图',
                    layer: new TileLayer({
                        source: new XYZ({
                            url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
                            crossOrigin: 'anonymous',
                            attributions: '© Esri'
                        })
                    })
                }
            };
            this.map = new Map({
                target: this.$refs.mapContainer2,
                layers: [], // 重要：先不添加任何图层
                view: new View({
                    center: [116.3974, 39.9093],
                    zoom: 10
                }),
            });

            // 延迟添加高德图层
            setTimeout(() => {
                this.map.addLayer(this.baseLayers.gaode.layer);
                this.currentBaseLayer = 'gaode';
                console.log('初始高德图层已添加');
            }, 1000);
        },
        switchBaseLayer(layerName) {
            if (this.currentBaseLayer !== layerName) {
                console.log('切换到:', layerName);

                // 移除当前图层
                const layers = this.map.getLayers();
                const currentLayer = layers.item(0);
                if (currentLayer) {
                    this.map.removeLayer(currentLayer);
                }

                // 添加新图层
                this.map.addLayer(this.baseLayers[layerName].layer);
                this.currentBaseLayer = layerName;

                // 强制更新地图
                this.map.updateSize();
            }
        },
    },
    beforeUnmount() {
        console.log(8888);

        if (this.map) {
            console.log(5555);

            this.map.setTarget(null)
        }
    }

}
</script>

<style scoped>
.map-controls {
    /* position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1000; */
    background: white;
    padding: 10px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.map-controls button {
    margin: 0 5px;
    padding: 8px 12px;
    cursor: pointer;
    border: 1px solid #ddd;
    background: #f5f5f5;
    border-radius: 3px;
}

.map-controls button.active {
    background: #0078ff;
    color: white;
    border-color: #0078ff;
}

.map-container {
    width: 100%;
    height: 80%;
}
</style>